<template>
  <div class="flex flex-col h-full">
    <!-- 顶部信息栏 -->
    <div class="p-4 border-b border-gray-100">
      <div class="flex justify-between items-center">
        <div>
          <h2 class="text-lg font-medium">赵菲菲 美奥集团 人力资源管理专员</h2>
          <div class="flex items-center mt-1 text-sm text-gray-500">
            <span class="mr-4">城市总经理</span>
            <span class="mr-4 text-blue-600">65-95K</span>
            <span>上海</span>
            <a href="#" class="text-blue-600 ml-4 flex items-center">
              查看职位
              <i class="ri-arrow-right-s-line ml-1"></i>
            </a>
          </div>
        </div>
      </div>
      
      <!-- 联系方式按钮 -->
      <div class="flex mt-4 gap-4">
        <button class="flex items-center text-gray-600 border border-gray-200 rounded-lg px-4 py-2">
          <i class="ri-phone-line mr-2"></i>
          电话号码
        </button>
        <button class="flex items-center text-gray-600 border border-gray-200 rounded-lg px-4 py-2">
          <i class="ri-wechat-line mr-2"></i>
          微信号码
        </button>
      </div>
    </div>

    <!-- 聊天内容区域 -->
    <div class="flex-1 bg-gray-50 p-4 overflow-y-auto">
      <!-- 时间标记 -->
      <div class="flex justify-center mb-4">
        <span class="bg-white text-gray-500 text-xs px-3 py-1 rounded-full shadow-sm">06-11 13:36</span>
      </div>

      <!-- 消息列表 -->
      <div v-for="message in messages" :key="message.id" class="mb-4">
        <MessageBubble :message="message" />
      </div>

      <!-- 系统消息 -->
      <div class="flex justify-center my-4">
        <div class="bg-green-50 text-green-700 rounded-lg p-3 shadow-sm max-w-md">
          <div class="flex items-center">
            <div class="w-8 h-8 flex items-center justify-center mr-2 bg-green-100 rounded-full">
              <i class="ri-question-line text-green-500"></i>
            </div>
            <p>Boss还没查看你的消息？</p>
          </div>
          <p class="text-sm mt-1 ml-10">设置后Boss上线优先查看你的消息</p>
          <div class="flex justify-center mt-2">
            <button class="bg-white border border-green-200 rounded-lg px-4 py-2 text-sm text-green-600">
              设置优先提醒Boss
            </button>
          </div>
          <div class="flex items-center mt-2 ml-10">
            <i class="ri-user-line text-green-500 text-xs mr-1"></i>
            <p class="text-xs">1432万求职者使用后得到反馈</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="p-4 border-t border-gray-100 bg-white">
      <div class="flex items-center mb-2">
        <button class="w-8 h-8 flex items-center justify-center text-gray-500 cursor-pointer hover:text-gray-700">
          <i class="ri-emotion-line"></i>
        </button>
        <button class="w-8 h-8 flex items-center justify-center text-gray-500 cursor-pointer hover:text-gray-700">
          <i class="ri-image-line"></i>
        </button>
        <button class="w-8 h-8 flex items-center justify-center text-gray-500 cursor-pointer hover:text-gray-700">
          <i class="ri-notification-line"></i>
        </button>
        <button class="w-8 h-8 flex items-center justify-center text-gray-500 cursor-pointer hover:text-gray-700">
          <i class="ri-file-line"></i>
        </button>
      </div>
      
      <div class="flex">
        <input 
          v-model="newMessage"
          type="text" 
          class="flex-1 py-2 px-3 border border-gray-200 rounded-lg mr-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" 
          placeholder="按Enter键发送，按Ctrl+Enter键换行"
          @keyup.enter="sendMessage"
        >
        <button 
          @click="sendMessage"
          class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
        >
          发送
        </button>
      </div>
      
      <div class="flex justify-center mt-4 gap-4">
        <button class="flex items-center justify-center bg-white border border-gray-200 rounded-lg px-6 py-2 text-gray-600">
          <i class="ri-file-paper-line mr-2"></i>
          发简历
        </button>
        <button class="flex items-center justify-center bg-white border border-gray-200 rounded-lg px-6 py-2 text-gray-600">
          <i class="ri-phone-line mr-2"></i>
          拨电话
        </button>
        <button class="flex items-center justify-center bg-white border border-gray-200 rounded-lg px-6 py-2 text-gray-600">
          <i class="ri-wechat-line mr-2"></i>
          换微信
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useMessagesStore } from '../stores/messages'
import MessageBubble from './MessageBubble.vue'
import type { Conversation } from '../types'

interface Props {
  conversation: Conversation
}

const props = defineProps<Props>()

const messagesStore = useMessagesStore()
const newMessage = ref('')

const messages = computed(() => 
  messagesStore.getConversationMessages(props.conversation.id)
)

const sendMessage = () => {
  if (newMessage.value.trim()) {
    messagesStore.sendMessage(props.conversation.id, newMessage.value.trim())
    newMessage.value = ''
  }
}
</script>
